<!DOCTYPE html>
<html>
<head>
	<title>%s</title>
	<meta charset="utf-8">
	<style type="text/css">
		#imgh{
			margin: 50px auto;
			width: 300px;
			position: relative;
		}
		.ia{
			height: 300px;
			position: absolute;
			top: 0px;left: 0px;
			transition: transform 2s;
		}
		/*#imgh:hover .i1{
			transform:rotate(-45deg) translate(10px,10px)  ;
		}
		#imgh:hover .i2{
			transform:rotate(-20deg) translate(85px,34px)  ;
		}
		#imgh:hover .i3{
			transform:rotate(5deg) translate(164px,23px)  ;
		}
		#imgh:hover .i4{
			transform:rotate(28deg) translate(227px,-15px)  ;
		}*/
		#imgh:hover .i1{
			transform:rotate(-15deg) translate(10px,10px)  ;
		}
		#imgh:hover .i2{
			transform:rotate(0deg) translate(55px,28px)  ;
		}
		#imgh:hover .i3{
			transform:rotate(15deg) translate(103px,32px)  ;
		}
		#imgh:hover .i4{
			transform:rotate(30deg) translate(151px,24px)  ;
		}
		
	</style>
</head>
<body>
	<div id="imgh">
		<img class="i1 ia" src="image/a.jpg">
		<img class="i2 ia" src="image/a.jpg">
		<img class="i3 ia" src="image/a.jpg">
		<img class="i4 ia" src="image/a.jpg">
	</div>

</body>
</html>